<template>
  <CommonPanel title="今日通行量统计TOP10" :loading="loading">
    <div class="content-box1">
     <CommonChart ref="myChart" :option="option" />
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from 'echarts';
import { reactive } from 'vue';

import { onMounted, ref, watch ,computed} from "vue";
import { defineProps } from 'vue';
const loading = ref(false);

const props = defineProps({
  data: Object
});

let name =ref([])
let num =ref([])

watch(() => props.data, (newData) => {
      if (newData) {
        name.value = newData?.todys_personnel_access?.map((item)=>{
          return item?.name
        })
        num.value =newData?.todys_personnel_access?.map((item)=>{
          return item?.num
        })
      }
    });

const option = computed(() => {
  return {
    grid: {
      left: '5%',
      right: '10%',
      top: '20%',
      bottom: '15%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(50, 216, 205, 1)'
        },
      }
    },
   xAxis: {
    type: 'category',
    data: name.value,
    boundaryGap: 1,
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#A1A7B3'
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
    axisLabel:{
      fontSize:8,
      // rotate:2 旋转文字
    },
    
  },
  yAxis: [{
      type: 'value',
      name: '',
      padding: 5,
      // max: 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#A1A7B3',
          type: 'dashed'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          color: '#A1A7B3'

        }
      },
      axisTick: {
        show: false
      }
    },

    ],
  series: [
    {
      data: num.value,
      type: 'bar',
      barWidth:6 ,// 柱子宽度
    }
  ]
  };
});

</script>

<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;
  flex-direction: column;

  &_top {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #9BA3AE;

    span {
      font-weight: 600;
      font-size: 24px;
      color: #65E3F8;
    }
  }
  }
</style>